<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="utf-8" http-equiv="content-type" content="text/html">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>广场</title>
<style>
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

a:link {
  text-decoration: none;
  color: #000;
}

body {
  font-family: "微软雅黑";
  background-color: #eee;
  font-size: 20px;
}

</style>

<jsp:include page="../headres.jsp" flush="true" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/css/square.css">

<script>
$(document).bind('mobileinit',function(){
 $.mobile.changePage.defaults.changeHash = false;
 $.mobile.hashListeningEnabled = false;
 $.mobile.pushStateEnabled = false;
});
</script>
</head>
<body>
<input type="hidden" data-page="3" id="pageName"/>
<div data-role="page" id="user_page">
  <div data-role="content" class="content" id="content">
    <!--效果html开始-->
    <div class="slider">
      <ul>
        <li>
          <a href="javascript:void(0)" target="_blank">
            <img src="images/1.jpg" alt="物语" />
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" target="_blank">
            <img src="images/2.jpg" alt="众筹" />
          </a>
        </li>
        <li>
          <a href="javascript:void(0)" target="_blank">
            <img src="images/3.jpg" alt="疯抢" />
          </a>
        </li>
      </ul>
    </div>
  <script type="text/javascript" src="js/yxMobileSlider.js"></script>
  <script>
    $(".slider").yxMobileSlider({width:'100%',height:180,during:3000})
  </script>
<!--效果html结束-->

    <div class="search">
      <form class="s_form">
        <div class="s_frame" style="border-color:#50a4a3;">
          <input id="frame" type="text" name="fname" placeholder="搜索你感兴趣的物语" />
        </div>
        <div class="s_logo">
          <img src="images/search.png" />
        </div>
        <div class="s_btn"><input id="btn" type="button" value="搜索" onclick="search()"/>
        </div>
         
      </form>
    </div>

    <div class="nav_1">
      <ul>
        <li class="nav_1_1">
          <a href="javascript:void(0)" class="ACategory" category="0">关注度最高</a>
        </li>
        <li class="nav_1_2">
          <a href="javascript:void(0)" class="ACategory" category="1">近期上升最快</a>
        </li>
      </ul>
    </div>

    
  </div>
        
  <jsp:include page="../footer.jsp" flush="true" />
</div>
</body>
<script type="text/javascript">
$(function(){
	setBase();
	//分类点击事件
	$(".ACategory").click(function(){
		var category = $(this).attr("category");
		$(".s_list").remove();
		loadTopicList(category,1);
	});
})
function setBase(){
	loadTopicList(0,1);
	
}
function loadStoryList(div){
	var id = $(div).attr("tid");
	window.location.href="api/square/story_list.do?topicId="+id;
}
function search(){
	var searchKey = $("#frame").val();
	window.location.href="api/square/story_list.do?searchKey="+id;
}
//加载帮帮列表
var isLast = false;
function loadTopicList(StoryCategory,pageNum){
	if(isLast == false){
		var url = "";
		if(parseInt(StoryCategory) == 0){
			url = "api/square/getTopicListByGuanzhu.do";
		}else{
			url = "api/square/getTopicListByCreateRank.do";
		}
		$.post(url,{pageNum:pageNum,pageSize:10},
		function(data){
			if(data["STATUS"]=="OK"){
				var resultListJson = eval("("+data["RESULTLIST"]+")");
				var html= '';
				$.each(resultListJson,function(keyDaily,valueDaily){
					html+='<div class="s_list" tid="'+valueDaily.ID+'" onclick="loadStoryList(this);">';
					html+='<div class="s_img1">';
					html+='<img src="images/s_img1.png" />';
					html+='</div>';
					html+='<div class="s_user1">';
					html+='<img src="'+valueDaily.IMG+'" />';
					html+='</div>';
					html+='<div class="s_text1">';
					html+='<a class="s_txt" href="javascript:void(0)">';
					html+='<span>'+valueDaily.TITLE+'</span>';
					html+='</a>';
					html+='<span>关注</span>';
					html+='<span>'+valueDaily.GUANGZHU+'</span>';
					html+='<span>好文</span>';
					html+='<span>'+valueDaily.STORYNUM+'</span>';
					html+='<p>'+valueDaily.DESC+'</p>';
					html+='</div>';
					html+='<div class="s_more">';
					html+='<a href="javascript:void(0)">&gt</a>';
					html+='</div>';
					html+='</div>';
				});
				isLast = data["isLast"];
				$("#content").append(html);
			}
		},'json');
	}
}
</script>